<template>
	<div class="menu-grid sa-flex sa-flex-wrap">
		<template v-for="(item,index) in compData.data.titleArr" :key="item">
			<div :class="['title-item',{'last-title':  (index + 1) == compData.data.col}]" :style="{
				width: itemWidth,
				marginLeft:(index > 0 ? compData.data.space : 0) + 'px',
				borderRadius:compData.data.radius + 'px',
			}">
				<div class="text" :style="{color: item.title.color}">{{ item.title.text }}</div>
				<div class="bg" :style="{
					background: `linear-gradient(90deg, ${compData.data.titleStyle?.color1 || '#fff'} 0%, ${compData.data.titleStyle?.color2 || '#fff'} 100%)`,
					width: `${100 * compData.data.col}%`,
					left:  (-100 * index) + '%',
				}"></div>
			</div>
		</template>
		<template v-for="(item,index) in compData.data.list" :key="item">
			<div
			class="menu-item"
			:style="{
				width: itemWidth,
				background : item.color,
				marginTop: compData.data.space + 'px',
				marginLeft:((index > 0 && index% compData.data.col > 0) ? compData.data.space : 0) + 'px',
				borderRadius:compData.data.radius + 'px',
			}"
			>
			<sa-image :url="item.src" size="25" radius="0" :suffix="null"></sa-image>
			<div class="title" :style="{ color: item.title.color }">
				{{ item.title.text }}
			</div>
			</div>
		</template>
	</div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
	const props = defineProps(['compData']);
	const itemWidth = computed(()=>`calc((100% - ${ (props.compData.data.col - 1)*props.compData.data.space }px) / ${props.compData.data.col})`)
  </script>
  
  <style lang="scss" scoped>
	.menu-grid {
		.last-title{
			border-top-right-radius: 5px !important;
		}
		.title-item{
			height: 32px;
			position: relative;
			text-align: center;
			overflow: hidden;
			&:first-child{
				border-top-left-radius: 5px !important;
			}
			.text{
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				font-size: 12px;
				font-weight: 600;
			}
			.bg{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
			}
		}
	  .menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		height: 60px;
		// border-right: solid #eee;
		// border-bottom: solid #eee;
		position: relative;
		.title {
		  height: 16px;
		  margin-top: 2px;
		  font-size: 12px;
		}
	  }
	}
  </style>
  